{% extends "../../base.html" %}

{% block css %}
<style>
	/*The dialog box is displayed to change the password*/
	#changepwd {
	    display: none;
	    width: 400px;
	    height: 250px;
	    border: 1px solid #c0c0c0;
	    background: #ffffff;
	    position: absolute;
	    left: 25%;
	    top: 25%;
	}
	/*Pop-up title*/
	.title {
	    background: #f1f1f1;
	    color: #000000;
	    height: 35px;
	    line-height: 35px;
	    padding-left: 10px;
	    font-weight: bold;
	    font-size: 18px;
	}
	
	.body {
	    color: #000000;
	    height: 30px;
	    font-size: 15px;
	    line-height: 30px;
	    padding-left: 20px;
	    margin-top: 10px;
	}
	
	#cancle {
	    margin-left: 30%;
	    margin-top: 5%;
	    background: #f7f7f7;
	    color: #000000;
	    border: 1px solid #c0c0c0;
	    width: 60px;
	    height: 30px;
	}
	
	#save {
	    margin-left: 26px;
	    background: #1dc5a3;
	    color: #ffffff;
	    border: none;
	    width: 60px;
	    height: 30px;
	}
</style>
{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li class="active">
                    <a class="this">System setting</a>
                </li>
                <li class="active">
                    <a class="this-page">User management</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
            	<div class="panel-heading">
	                <form>
	            		<div style="display:inline; margin-right: 20px">
	        	    		<a href="/atp4p/user/add/" class="btn btn-primary">New users</a>
	        	    	</div>
	        	    	<div style="display:inline;">
	        	    		<a href="#" class="btn btn-warning" onClick="del()">Delete</a>
	        	    	</div>
	            	    <div style="display:inline; float: right;">
		        	    	<input type="button" value="Search" id="select"/>
		        	    </div>
			            <div style="display:inline; float: right; margin-right: 20px">
			        	    <div style="display:inline;">
			        	    	<label style="width: auto;">User name</label>
			        	    </div>
			        	    <div style="display:inline;">
			        	    	<input type="text" autocomplete="off" tabindex="0" id="name">
			        	    </div>
			        	</div>
	            	</form>
            	</div>
                <div class="panel-body">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                        	<th width="6%"><input type="checkbox" id="box" onclick="checkAll()"></th>
                            <th width='8%'>ID</th>
                            <th>User name</th>
                            <th>Email</th>
                            <th>Is admin</th>
                            <th width='18%'>Operation</th>
                        </tr>
                        </thead>
                        <tbody id="content">
                        </tbody>
                    </table>
                    <div id="barcon" name="barcon"></div>
                </div>
                <form id="changepwd" enctype="multipart/form-data">
            		<p class="title">Change password</p>
            		<div class="">
            			<p class="body">Old password：<input type="password" class="body" name="old_pwd" autocomplete="new-password"/></p>
                        <p class="body">New password：<input type="password" class="body" name="new_pwd"/></p>
                        <p class="body">Confirm password：<input type="password" class="body" name="confirm_new_pwd"/></p>
	            		<input type="button" value="Cancel" id="cancle" /> <input type="button" value="Submit" id="save"/>
	            	</div>
            	</form>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
<script>
	window.onload = select();

	$("#select").click(function(){
	   	select();
	});

	function select() {
	    var name = $("#name").val();
	    var url = `/atp4p/user/list/?name=${name}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(res){
				var data = res.data;
		    	var len = data.length;
		    	var out = "";
				if(len > 0){
			        for(var i = 0; i < len; i++){
			        	out += 
			        		`<tr>
                        	<td><input type="checkbox" aria-hidden="false" value="${data[i].id}" onclick="check()" name="checkOne"></td>
                            <td>${data[i].id}</td>
                            <td>${data[i].username}</td>
                            <td>${data[i].email}</td>
                            <td>${data[i].is_superuser}</td>
                            <td>
                                <a href="#" class="color: blue" onclick="div_add()">ChangePwd</a>
                                <a href="#" style="color: red" onclick="del(${data[i].id})">Delete</a>
                            </td>
                        </tr>`;
					}
	            }
	            $('#content').html(out);
	            goPage(1,10);
			}
		});
	};
</script>

<script>
    function div_add() {
        $('#changepwd').show();
    };
    
    $("#cancle").click(function() {
        $('#changepwd').hide();
    });
    
    $("#save").click(function() {
        $('#changepwd').hide();
        var data = $("#changepwd").serialize();
        $.ajax({
			type: 'POST',
			url: "/atp4p/user/setpwd/",
			data: data,
			contentType: "application/x-www-form-urlencoded;charset=UTF-8",
			success: function(res){
				var code = res.code;
				if(code == 0){
					alert("Successful!")
					document.getElementById("changepwd").reset()
				}else{
					alert("Unsuccessful!"+res.msg)
				}
			},
			error: function(res){
				alert("Unsuccessful!")
			}
		});
    });
    
    function del(id){
    	if (id === undefined){
    		id = new Array();
	    	var checkOnes = document.getElementsByName("checkOne");
	    	if(checkOnes.length>0){
    	    	for(var i=0;i<checkOnes.length;i++){
        	    	if(checkOnes[i].checked){
            			id.push(checkOnes[i].value);
            		}
        		}
			}
			id = id.toString();
		}
		var url = `/atp4p/user/delete/?id=${id}`;
	    $.ajax({
			type: 'GET',
			url: url,
			dataType:'json',
			success: function(data){
				alert("Successfully delete!");
			},
			error: function(){
				alert("Fail to delete!");
			}
		});
		select();
    };
</script>

{% endblock %}